import React from 'react';
import { Input, Button, Card, Row, Col, Typography } from 'antd';
import { useNavigate } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './index.module.css';

const { Title, Text } = Typography;
const { TextArea } = Input;

const recommendItems = [
  {
    title: '通知公告',
    subtitle: '汇聚各类通知',
    path: '/'
  },
  {
    title: '政策解读',
    subtitle: '汇聚各类政策解读',
    path: '/'
  },
  {
    title: '重要会议',
    subtitle: '汇聚各类重要会议',
    path: '/'
  },
  {
    title: '领导讲话',
    subtitle: '汇聚各类领导讲话',
    path: '/'
  },
  {
    title: '政府工作报告',
    subtitle: '汇聚各类政府工作报告',
    path: '/'
  }
];

const HomePage: React.FC = () => {
  const navigate = useNavigate();
  const [inputText, setInputText] = React.useState('');

  const handleSend = () => {
    if (inputText.trim()) {
      navigate('/chat', {
        state: {
          message: inputText
        }
      });
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  return (
    <MainLayout>
      <div className={`${styles.content} home-content`}>
        <div className={styles.titleSection}>
          <Title className={styles.systemTitle}>
            数政通
          </Title>
        </div>

        <div className={styles.recommendSection}>
          <Title level={3} className={styles.recommendTitle}>
            推荐阅读
          </Title>

          <Row gutter={[24, 24]} className={styles.recommendGrid}>
            {recommendItems.map((item, index) => (
              <Col span={24} sm={12} lg={8} key={index}>
                <Card
                  hoverable
                  className={styles.recommendCard}
                  onClick={() => navigate(item.path)}
                >
                  <Title level={4}>{item.title}</Title>
                  <Text type="secondary">{item.subtitle}</Text>
                </Card>
              </Col>
            ))}
          </Row>
        </div>

        <div className={styles.chatSection}>
          <TextArea
            rows={4}
            value={inputText}
            onChange={(e) => setInputText(e.target.value)}
            placeholder="请输入您的问题..."
            className={styles.textarea}
            onKeyPress={handleKeyPress}
          />
          <Button
            type="primary"
            size="large"
            onClick={handleSend}
            className={styles.sendButton}
          >
            发送
          </Button>
        </div>
      </div>
    </MainLayout>
  );
};

export default HomePage;
